@extends('layout.home')
@section('title', '报表查看')
@section('content')
    <style>
        * {padding: 0;margin: 0;}
        html, body {width: 100%;height: 100%;}
        /*.itemlist li{width: 100%;height: 30px;line-height: 30px;background-color:darkseagreen;text-align: center;}*/
        .itemlist {width: 100%;display: flex;flex-wrap: wrap;}
        .itemlist li {
            width: calc(calc(100% / 3) - 10px);
            margin: 5px;
            height: 50px;
            line-height: 50px;
            box-sizing: border-box;
            background-color: darkseagreen;
            text-align: center;
            margin-bottom: 1px;
            float: left;
        }
        .red{background-color: red !important;}
    </style>
    <div id="header" style="background-color: orangered;width: 100%;height: 50px;line-height: 50px;text-align: center">智能制造中心安全日报</div>
    <div id="main1" style="height:300px;margin-bottom: 20px;"></div>
{{--    <p style="text-align: center;font-weight: bold;color: black;" id="bmqk">部门情况</p>--}}
{{--    <p id="rq"></p>--}}
    <div id="main2" style="height:300px;"></div>
    <div class="khitems">
        <p style="text-align: center;font-size: 20px;font-weight: bold;color: black;display: none">人员单项考核情况</p>
        <ul style="overflow: hidden;" class="itemlist"></ul>
    </div>

    <style>
        .cpt-loading-mask{
            text-align: center; /*让div内部文字居中*/
            background-color: #fff;
            border-radius: 20px;
            width: 300px;
            height: 350px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

    </style>

    <script>


        function startLoading(){
            $('body').loading({
                loadingWidth:220,
                title:'加载中',
                name:'pageloading',
                titleColor:'#fff',
                discColor:'#EDEEE9',
                discription:'',
                direction:'column',
                type:'origin',
                originBg:'#ECCFBB',
                originDivWidth:40,
                originDivHeight:40,
                originWidth:6,
                originHeight:6,
                smallLoading:false,
                loadingBg:'rgba(56,43,14,0.8)',
                loadingMaskBg:'rgba(66,66,66,0.2)'
            });
        }


        //监听加载状态改变
        document.onreadystatechange = completeLoading;

        //加载状态为complete时移除loading效果
        function completeLoading() {
            if (document.readyState == "complete") {
                //removeLoading('pageloading');
                //alert('加载完毕');
                setTimeout(function(){
                    removeLoading('pageloading');
                },1000);
            }else{
                startLoading();
            }
        }



        let myChart1 = echarts.init(document.getElementById('main1')),
            myChart2 = echarts.init(document.getElementById('main2'));
        //************************************点击饼图1的时候联动饼图2***********************************************
        myChart1.on('click', function (params) {
            $.get('znzz_safe_report_bz',{bm:params.data.name2},res=>{
                console.log(res);
                let option2 = {
                    title: {
                        text: '班组人员情况',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        // trigger: 'item',
                        show: true,
                        formatter: '{a} <br/>{b}'
                    },
                    color: [],//['red', 'green', 'green', 'green', 'green', 'green'],
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: []
                    },
                    series: [
                        {
                            name: '班组人员情况',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                // {value: 1, name: '钣焊一组:肖太斌'},
                                // {value: 1, name: '钣焊二组:张志红'},
                                // {value: 1, name: '大件一组:陈跃'},
                                // {value: 1, name: '大件二组:葛新龙'},
                                // {value: 1, name: '下料一组:岳磊'},
                                // {value: 1, name: '下料二组:徐兴龙'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                res.forEach(function (item) {
                    option2.series[0].data.push(item) ;
                    option2.color.push(item.color);
                })
                $('.khitems').hide();
                //get_person_item(gbm,gbz);
                myChart2.setOption(option2);//柱状图
            })

        });
        //***********************************************************************************
        myChart2.on("click",function (params) {
            let {bm,bz} = params.data;
            $.get('znzz_safe_report_wgy',{bm,bz},res=>{
                let str="";
                $.each(res, (k,v)=> str+=`<li class="${v['color']}">${v['name2']}</li>`);
                $('.khitems').show();
                $('.khitems p').show();
                $('.itemlist').empty().append(str);
            })
        })


        //***********************************************************************************
        function init_pie1(){
            $.get("znzz_safe_report_bm", res => {
                let d = new Date();
                let str= d.getFullYear()+'年'+(d.getMonth()+1)+'月'+(d.getDate()-1)+'日';
                let option1 = {
                    title: {
                        text: `部门情况`,
                        subtext: `${str}`,
                        left: 'center'
                    },
                    tooltip: {
                        // trigger: 'item',
                        show: true,
                        //{a} <br/>{b} : {c} ({d}%)
                        formatter: '{a} <br/>{b}'
                    },
                    color: [],//['red', 'darkseagreen', 'darkseagreen', 'darkseagreen', 'darkseagreen'],
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: []
                    },
                    series: [
                        {
                            name: '异常情况',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                // {value: 1, name: '钣焊(嵇波)：异常个数1'},
                                // {value: 1, name: '精密(谭建昌)：异常个数0'},
                                // {value: 1, name: '金工(李国青)：异常个数0'},
                                // {value: 1, name: '物流(陈秋红)：异常个数0'},
                                // {value: 1, name: '设备科(赵昌奎)：异常个数0'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                res.forEach(function (item) {
                    option1.series[0].data.push(item) ;
                    option1.color.push(item.color);
                })
                myChart1.setOption(option1);//部门异常情况

            })
        }
        init_pie1();
    </script>
@endsection
